React useContextを使いたいときはないでしょうか。
けど、そんな中で悩むことは、
・React HooksのuseContextで複数のコンポーネントを操作する方法がわからならい
ですよね。
今回はそんなお悩みを解決する
・React HooksのuseContextで複数のコンポーネントを操作する方法
についてまとめます！
もくじ
React HooksのuseContextのとは
useContextは、React Hooksの関数コンポーネントで、追加のフックに位置します。
useContextはReact上でグローバルデータとして値を管理する機能で、コンポーネントのどの階層にもデータを共有することができます。
例えば子クラスコンポーネントに値を引き渡すにはpropsを使い値を受け渡す必要がありましたが、useContextを使うと、それが不要となり、コンポーネントから直接値を取得できるようになります。
React HooksのuseContextの使い方
React HooksのuseContextの使い方について説明をします。
React HooksのuseContextの構文と引数
React HooksのuseContextの構文と引数は以下の通りです。
React HooksのuseContextの構文
createContext(＜第1引数＞);React HooksのuseContextの引数
| 第1引数 | 保持させたい値や関数を指定します。 |
React HooksのuseContextを実装する
React HooksのuseContextを実装するにはcreateContextとuseContextをimportします。
import { createContext,useContext } from "react"React HooksのuseContextで複数のコンポーネント内で値を保持、取得する
React HooksのuseContextでコンポーネント外での値を保持させ、propsを使わずに、複数のサブコンポーネントを介して値を表示してみましょう。
以下サンプルコードです。
サンプルコード
import { createContext,useContext } from "react"
const value1 = createContext("useContextの値です");
function App() {
return (
<div>
<ChildComponent />
</div>
);
}
const ChildComponent = () => {
return (
<div>
<SubChildComponent />
</div>
);
};
const SubChildComponent = () => {
const value2 = useContext(value1);
return (
<p>
{value2}
</p>
);
};
export default App;実行してみましょう。
各コンポーネントにpropsを使わずに、useContextの値がサブコンポーネントから表示されていますね。
コードの説明
createContextでContextに値を保持させます。
const value1 = createContext("useContextの値です");サブコンポーネントのChildComponentを関数Appを介して画面に表示させます。
return (
<div>
{/* <input type="text" value={value2._currentValue} /> */}
<ChildComponent />
</div>
);サブコンポーネントのChildComponentを設定します。もうひとつのサブコンポーネントSubChildComponentの結果を返しますす。
const ChildComponent = () => {
return (
<div>
<SubChildComponent />
</div>
);
};孫に位置するサブコンポーネントSubChildComponentを設定します。useContextで取得した値を返します。
const SubChildComponent = () => {
const value2 = useContext(value1);
return (
<p>
{value2}
</p>
);
};関数Appの結果を出力します。
export default App;さいごに
いかがでしょうか。
今回は、
・React HooksのuseContextで複数のコンポーネントを操作する方法
についてまとめました。
また、他にも便利な方法がありますので、よろしければご参照頂ければと思います。
タカヒロも悩んでいましたが、こちらの本でかなり理解ができるようになりました！
＞＞Amazonで詳細を見る
電子書籍もいいですが、紙質がやわらかく読みやすいので書籍のほうがおすすめです。
この記事の関連キーワード
「React Hook」の関連記事
こちらの記事の内容「React Hook」に関連する記事一覧です。
